/**
 * 远程控制 - 装车控制列表页
 * @author xiaoxujs
 */
import AddModule from "./components/AddModule"; // 添加装车站
import { Button, message, Spin, Switch } from "antd";
import { LGLItem, LoadingControlListBox } from "./style";
import { useCallback, useEffect, useState } from "react";
import { INoFenye } from "../../../type/commit";
import { handleDeleteAssets } from "../../../assets/fun/Antd/deleteFun";
// import { useNavigate } from "react-router-dom";
import { ITlplTLaneList } from "../../../type/remoteControl/loadingControlList";
import { getTlplTLaneDeleteById, getTlplTLaneList, getTlplTLaneUpdateLaneState } from "../api";
import EnterPageModule from './components/EnterPageModule'

const LoadingControlList = () => {
    // const navigate = useNavigate();


    const [addShow, setAddShow] = useState(false); //添加装车站弹窗显示
    const [listData, setListData] = useState<ITlplTLaneList[]>([]); // 列表数据
    const [listLoading, setListLoading] = useState(false); // 列表加载show
    const [clickData, setClickData] = useState<ITlplTLaneList>(); // 点击的装车站数据
    const [enterPageModuleShow, setEnterPageModuleShow] = useState(false); // 进入页面弹窗显示
    const [enterPageModuleData, setEnterPageModuleData] = useState<{
        id: string,
        name: string,
    }>(); // 进入页面弹窗ID
    const listFun = useCallback(async () => {
        setListLoading(true);
        const { code, msg, data } = await getTlplTLaneList() as INoFenye<ITlplTLaneList>;
        if (code === 20000) {
            setListData(data);
        } else {
            message.error(msg);
        }
        setListLoading(false);
    }, [])
    useEffect(() => {
        listFun();
    }, [listFun])

    //  添加装车站回调函数
    const handleAddCallback = () => {
        setClickData(undefined);
        setAddShow(false);
        listFun();
    }
    /**
     * 开启或者关闭装车站
     * @param id 装车站ID
     */
    const handleSwitch = async (laneId: string, laneState: number, e:React.MouseEvent<HTMLButtonElement, MouseEvent> ) => {
        e.stopPropagation();
        const { code, msg } = await getTlplTLaneUpdateLaneState({ laneId: laneId, laneState: laneState === 0 ? 1 : 0 }) as { code: number, msg: string };
        if (code === 20000) {
            message.success('操作成功');
            listFun();
        } else {
            message.error(msg)
        }
    }
    const handleDelete = (laneId: string) => {
        handleDeleteAssets(
            async () => {
                return (await getTlplTLaneDeleteById({ laneId })) as {
                    code: number;
                    msg: string;
                };
            },
            () => {
                listFun();
            }
        );
    }
    // 进入页面弹窗
    const handleEnterPage = (e: React.MouseEvent, id: string, name: string) => {
        e.stopPropagation();
        setEnterPageModuleData({
            id,
            name
        })
        setEnterPageModuleShow(true);
    }
    return <LoadingControlListBox>
        <div className="lgl-list-title-box">
            <div className="lgl-list-title-text">
                装车控制
            </div>
            <Button type='primary' icon={<span className="iconfont">&#xe620;</span>} onClick={() => setAddShow(true)}>添加车道</Button>
        </div>
        <Spin spinning={listLoading}>
            <div className="list-box">
                {
                    listData.map(item => <LGLItem key={item.id} cardstatus={item.laneState}>
                        <div className="look-box" onClick={(e) => handleEnterPage(e,item.id, item.laneName)}>
                            <div className="look-one_box">
                                <div className="look-one-left-box">
                                    <div className="look-one-image"></div>
                                    <div className="look-one-text">{item.laneName}({item.laneState === 0 ? '投入使用' : '停止使用'})</div>
                                </div>
                                <Switch checked={item.laneState === 0 ? true : false} onChange={(show, e) => handleSwitch(item.id, item.laneState, e)} />
                            </div>
                        </div>
                        <div className="handle-box">
                            <div className="handle-button-box">
                                <Button icon={<span className="iconfont">&#xe642;</span>} type="text" onClick={() => {
                                    setClickData(item);
                                    setAddShow(true);
                                }}>编辑车道</Button>
                            </div>
                            <div className="handle-button-box">
                                <Button icon={<span className="iconfont">&#xe61c;</span>} type="text" onClick={() => handleDelete(item.id)}>删除车道</Button>
                            </div>
                        </div>
                    </LGLItem>)}
            </div>
        </Spin>

        <AddModule
            open={addShow}
            handleAddCallback={handleAddCallback}
            clickData={clickData}
        />
        <EnterPageModule open={enterPageModuleShow} enterPageModuleData={enterPageModuleData} setEnterPageModuleShow = {setEnterPageModuleShow}/>
    </LoadingControlListBox>
}

export default LoadingControlList;